<template>
	<view class="bg-white">
		<swiper class="swiper" circular autoplay>
			<swiper-item><image class="bg" src="https://www.kazjd.com/temp/banner-top.jpg" mode="aspectFill"></image></swiper-item>
			<swiper-item><image class="bg" src="https://www.kazjd.com/temp/banner-top2.jpg" mode="aspectFill"></image></swiper-item>
			<swiper-item><image class="bg" src="https://www.kazjd.com/temp/banner-top3.jpg" mode="aspectFill"></image></swiper-item>
		</swiper>
		<view class="flex text-gray text-xl text-left padding">
			<view>
				<view>面积<text>110㎡</text></view>
				<view>楼层<text>1层</text></view>
				<view>加床<text>不可加床</text></view>
			</view>
			<view>
				<view>可住<text>2人</text></view>
				<view>窗户<text>有窗</text></view>
				<view>宽带<text>客房WIFI</text></view>
			</view>
		</view>
		<view class="flex padding">
			<view v-if="type" @tap='show=true'>
				入住时间: {{time[0]}}
			</view>
			<view v-else @tap='show=true'>
				入住时间: {{time[0]}}至{{time[1]}}
			</view>
			<view>
				<view v-if="type" class="cu-tag light bg-blue radius">秒计房</view>
				<view v-else>共{{num}}晚</view>
			</view>
		</view>
		<view class="padding">
			<button style="width: 100%;" @tap='goOrder' class="cu-btn bg-yellow margin-top round lg" type="">预订</button>
		</view>
		
		<u-calendar
		start-text='住店'  
		end-text='离店'
		btn-type='warning'
		active-bg-color='#ff9900'
		range-bg-color='#fdf6ec'
		range-color='#ff9900'
		v-model="show" 
		:mode="type?'date':'range'"
		:min-date='minDate'
		max-date="3000-12-31"
		@change='changeTime'>
			<view slot="tooltip">
				<view class="text-center margin-top">
					请选择住店/离店时间
				</view>
			</view>
		</u-calendar>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
				num:null,
				show:false,
				minDate:this.$u.timeFormat()
			}
		},
		computed:{
			...mapGetters(['type','time'])
		},
		onLoad(e) {
			this.initTime();
		},
		methods: {
			goOrder(){
				uni.navigateTo({
					url:"../order/order"
				})
			},
			initTime(){
				if(!this.type){
					this.num = parseInt(((new Date(this.time[1]).getTime() - new Date(this.time[0]).getTime())/(1000*60*60*24)));
				}
			},
			changeTime(e){
				let time = [];
				if(this.type){
					time[0]=e.result;
				}else{
					if(e.startDate==e.endDate){
						return;
					}
					time[0]=e.startDate;
					time[1]=e.endDate;
					this.num = parseInt(((new Date(e.endDate).getTime() - new Date(e.startDate).getTime())/(1000*60*60*24)));
				}
				this.$store.dispatch('SetTime',time);
			}
		}
	}
</script>

<style lang="scss" scoped>
.swiper{
	width: 100vw;
	height: 480rpx;
	image{
		width: 100%;
	}
}
.flex{
	justify-content: space-between;
	text{
		color: #333333;
		margin-left: 20rpx;
		line-height: 2rem;
	}
}
</style>
